<template>
  <div class="tree-container">
    <div class="left-tree" :style="{ width: left + 'px' }">
      <div class="trigger" @mousedown="dragLine">
        <img src="@/assets/img/trigger.png" alt="trigger" />
      </div>
      <div class="filter-container">
        <div class="tree-header">
          <span class="page-title">车间建模</span>
          <div class="btn-list">
            <p class="btn-item" @click="handleReset">
              <i class="el-icon-refresh-left" />
            </p>
          </div>
        </div>
        <div class="tree-list">
          <el-tree
            :props="treeProps"
            :data="treeData"
            node-key="id"
            default-expand-all
            :expand-on-click-node="false"
            children="child"
            @node-click="handleNodeClick"
          >
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span class="label ellipsis__more"
                >{{ data.name }}({{ data.no }})</span
              >
              <span class="tree-option">
                <el-tooltip content="添加" placement="bottom" effect="light">
                  <el-button
                    type="text"
                    size="mini"
                    icon="el-icon-circle-plus-outline"
                    v-if="data.level === 1"
                    @click="() => handleCreate(data)"
                  >
                  </el-button>
                </el-tooltip>
                <el-tooltip content="编辑" placement="bottom" effect="light">
                  <el-button
                    type="text"
                    size="mini"
                    icon="el-icon-edit"
                    @click="() => handleEditRow(data)"
                    v-if="data.level === 2"
                  >
                  </el-button>
                </el-tooltip>
                <el-tooltip content="删除" placement="bottom" effect="light">
                  <el-button
                    type="text"
                    size="mini"
                    icon="el-icon-delete"
                    style="color: red"
                    @click="() => handleDelete(data)"
                    v-if="data.level === 2"
                  >
                  </el-button>
                </el-tooltip>
              </span>
            </span>
          </el-tree>
        </div>
      </div>
    </div>
    <div
      class="right-container"
      style="padding: 10px"
      :style="{ width: right }"
    >
      <page-header-tool
        :title="title"
        :btns="modBtns"
        :max="4"
      ></page-header-tool>
      <avue-crud
        class="avue-affixed avue-new-table"
        ref="crud"
        :page.sync="page"
        :data="tableData"
        :option="tableOption"
        :table-loading="listLoading"
        @refresh-change="searchChange"
        @current-change="currentChange"
        @size-change="sizeChange"
        @search-change="searchChange"
        @selection-change="selectionChange"
      >
        <template slot="status" slot-scope="{ index, row }">
          <el-tag size="mini" type="success" v-if="row.status === '1'"
            >启用</el-tag
          >
          <el-tag size="mini" type="warning" v-if="row.status === '0'"
            >停用</el-tag
          >
        </template>
        <template slot-scope="scope" slot="menu">
          <table-column-btns
            :btns="tableBtns"
            :scope="scope"
          ></table-column-btns>
        </template>
      </avue-crud>
    </div>
  </div>
</template>

<script>
import { tableOption } from "./const/option";
import { tableBaseMixin } from "@/mixins/tableBase";
import { treeDataList,BaseTableData } from "./const/data.js";
export default {
  name: "ledger",
  components: {},
  mixins: [tableBaseMixin],
  data() {
    return {
      left: 300,
      leftPos: 300,
      startX: 0,
      moving: false,
      right: "",
      downLoadUrl: {
        downLoadUrl: "",
        excelName: "",
      },
      treeProps: {
        children: "child",
        label: "name",
      },
      modBtns: [
        {
          name: "新增工位机",
          click: this.handleCreateMachine,
          type: "success",
        },
        {
          name: "导入",
          click: this.handleImport,
          type: "success",
        },
        // {
        //   name: '启用',
        //   click: this.handleMultiEnable,
        // },
        // {
        //   name: '停用',
        //   click: this.handleMultiStop,
        //   type: 'warning'
        // },
      ],
      treeData: [],
      tableOption: tableOption,

      selectionData: [],
      tableData: [],
      listLoading: false,
      tableBtns: [
        {
          name: "编辑",
          click: this.handleEditLine,
        },
        // {
        //   name: '绑定设备',
        //   click: this.handleBindEquip
        // },
        {
          name: "删除",
          click: this.handleDelete,
          color: "red",
        },
        // {
        //   name: "启用",
        //   click: this.handleEnable,
        //   show: (row, index) => {
        //     return row.status === '0';
        //   },
        // },
        // {
        //   name: "停用",
        //   click: this.handleStop,
        //   color: '#E6A23C',
        //   show: (row, index) => {
        //     return row.status === '1';
        //   },
        // },
      ],
      title: " ",
      currentData: null,
    };
  },
  computed: {},
  created() {
    this.init();
  },
  methods: {
    init() {
      this.right = document.body.clientWidth - this.left - 300 + "px";
      this.page.currentPage = 1;
      this.getTree();
    },
    getTree() {
      treeDataList.forEach((item) => {
        if (item.child) {
          item.child.forEach((showItem) => {
            if (showItem.child) {
              showItem.child.forEach((centerItem) => {
                if (centerItem.child) {
                  centerItem.child.forEach((sItem) => {
                    delete sItem.child;
                  });
                }
              });
            }
          });
        }
      });
      this.treeData = treeDataList;
      this.tableData=BaseTableData
    },
    handleNodeClick(data, node) {
      if (data.level === 3) {
        this.title = node.parent.label + "/" + data.name + "  工位机";
        this.currentData = data;
        this.currentData.workCenterId = node.parent.data.id;
        this.getList();
      } else {
        this.title = "";
        this.currentData = null;
        this.tableData = [];
      }
    },
    async getList() {
      const { id: processId, workCenterId } = this.currentData;
      if (!processId) {
        return;
      }
      let params = {
        page: this.page.currentPage,
        size: this.page.pageSize,
        workCenterId,
        processId,
      };
    },
    handleReset() {
      this.getTree();
      this.title = " ";
    },
    /* C 新增主数据 */
    handleCreate(node) {
      // if (node.level === 1) {
      //   this.$refs.modifyWorkShopDialog.add(node)
      // }
      if (node.level === 1) {
        this.$refs.modifyWorkCenterDialog.add(node);
      }
      // if (node.level === 3) {
      //   this.$refs.modifyWorklocationDialog.add(node)
      // }
      // if (node.level === 2) {
      //   this.$refs.modifyWorkCenterDialog.add(node)
      // }
    },
    handleCreateMachine() {
      if (!this.currentData) {
        return this.$message.error("请选择工序");
      }
      const { level, id } = this.currentData;
      if (level === 3 && id) {
        this.$refs.workMachine.add(this.currentData);
      } else {
        return this.$message.error("请选择工序");
      }
    },
    /* U 编辑主数据 */
    handleEditRow(node) {
      // if (node.level === 2) {
      //   this.$refs.modifyWorkShopDialog.edit(node)
      // }
      if (node.level === 2) {
        this.$refs.modifyWorkCenterDialog.edit(node);
      }
      // if (node.level === 4) {
      //   this.$refs.modifyWorklocationDialog.edit(node)
      // }
    },
    handleEditLine(row) {
      // this.$refs.modifyWorklocationDialog.edit(row)
      this.$refs.workMachine.edit(row);
    },
    /* 删除数据 */
    handleDelete(row) {
      this.$confirm("是否确认删除该信息", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        if (!row.level) {
          row.level = 4;
        }
      });
    },

    // 工作中心关联班次
    handleLinkRow(node) {
      this.$refs.shiftList.edit(node);
    },
    handleBindEquip(row) {
      this.$refs.equipList.init(row);
    },
    dragLine(e) {
      // console.log(e);
      this.startX = e.clientX;
      document.addEventListener("mousemove", this.dragMove);
      document.addEventListener("mouseup", this.dragEnd);
    },
    dragMove(event) {
      // console.log(event);
      // console.log(startX);
      this.moving = true;
      const distanceX = event.clientX - this.startX;
      let left = this.leftPos + distanceX;
      // this.left += distanceX;
      if (left < 300) {
        left = 300;
      }
      this.left = left;
      this.right = document.body.clientWidth - left - 300 + "px";
    },
    dragEnd() {
      this.leftPos = this.left;
      this.moving = false;
      document.removeEventListener("mousemove", this.dragMove);
      document.removeEventListener("mouseup", this.dragEnd);
    },

    handleImport() {
      this.$refs.uploadModals.init();
    },
    handleImportDown() {
      getImportDown().then((res) => {
        downloadFile(res.data, "工作中心导入模板");
      });
    },
    errorExcelDown(res) {
      if (res.status && res.status === 200) {
        this.$message.error("导入失败,失败原因请下载失败文件查看");
        this.downLoadUrl.excelName = "工作中心导入失败原因";
        this.downLoadUrl.downLoadUrl = res.data;
      } else if (res.code === 0) {
        this.$message.success("导入成功");
        this.$refs.uploadModals.visible = false;
        this.$refs.uploadModals.loading = false;
        this.init();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/styles/variables.scss";

.tree-container {
  padding: 0 10px;
  width: 100%;
  height: 100%;

  .left-tree {
    margin-right: 15px;
    //width: 20%;
    position: relative;
    float: left;
    .trigger {
      cursor: pointer;
      position: absolute;
      right: -6px;
      top: 45%;
      border-radius: 20px;
      padding: 12px 4px;
      background-color: #898989;
      text-align: center;
      img {
        width: 6px;
      }

      &:hover {
        background-color: $themeColor;
      }
    }

    .filter-container {
      height: 100%;
      background-color: #ffffff;
      padding: 10px;
      .tree-header {
        height: 24px;
        line-height: 24px;
        font-size: 16px;
        font-weight: bold;
        display: flex;
        justify-content: space-between;
        width: 100%;
        margin-bottom: 20px;

        .btn-list {
          display: flex;
          justify-content: space-between;

          .btn-item {
            margin: 0 8px 0 0;
            cursor: pointer;
          }
        }
      }
    }

    .custom-tree-node {
      //display: flex;
      //justify-content: space-between;
      width: 100%;
      font-size: 12px;
      padding: 0 10px;

      .label {
        line-height: 28px;
        flex-basis: 170px;
        overflow: hidden;
        display: inline-block;
        width: 60%;
      }

      .ellipsis__more {
        overflow: hidden; //超出的文本隐藏
        text-overflow: ellipsis; //溢出用省略号显示
        white-space: nowrap; //溢出不换行
      }

      .tree-option {
        float: right;
      }
    }
  }

  .right-container {
    //width: 80%;
    height: 100%;
    background-color: #ffffff;
    float: left;
  }
}

.tree-list {
  overflow-y: scroll;
  height: 80vh;
}
</style>
